<script setup>
import { getCurrentInstance, reactive,ref } from 'vue';
import { useRoute } from 'vue-router'
import tools from "../tools/tools.js"


const loading = ref(true)
const route = useRoute()
const listId = {id:route.query.id}
const musicId = {
    id:route.query.id,
    limit:50
}

const list = reactive({});
const musiclist = reactive([])
// 获取歌单信息
const { proxy } = getCurrentInstance();

 proxy.$https.listDetail(listId).then(res => {
    list.playlist={...res.data.playlist};
    const num = list.playlist.playCount
    list.playlist.playCount = num/100000 > 1 ? Math.floor(num/100000) + "万" : num
    return proxy.$https.musicList(musicId)
}).then(val=>{
    musiclist.push(...val.data.songs)
    loading.value=false
})
function getId(id){
    tools.E.emit("Myevent", id);
    const abc = {value:musiclist}
    tools.E.emit("songs",abc )
}
</script>
<template>
   <div v-show="!loading">
        <div class="box">
            <img :src="list.playlist.coverImgUrl" alt="">
            <div class="smallBox">
                <p>
                    <img src="../assets/OIP-C.jpg" alt="">
                    <span>歌单</span><b>{{ list.playlist.name }}</b>
                </p>
                <div><span>最近更新:</span> {{tools.LstoTime( list.playlist.trackNumberUpdateTime)}}</div>
                <div>
                    <span>歌曲数量: {{ list.playlist.trackIds.length }}</span>
                    <span class="count">播放量:</span> {{ list.playlist.playCount}}次
                </div>
                <div><span>简介:</span> {{ list.playlist.description }}</div>

            </div> 
        </div>
        <main>
            <el-table :data="musiclist" style="width: 100%;height: 350px; overflow: auto;">
                <el-table-column prop="name" label="歌曲" width="200" />
                <el-table-column prop="ar[0].name" label="歌手" width="200" />
                <el-table-column prop="al.name" label="专辑" width="400" />
                <el-table-column prop="address" label="播放">
                    <template v-slot="scope">
                        <el-button @click.prevent="getId(scope.row)">
                            点击播放
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </main>
    </div> 
    <p id="p" v-show="loading">加载中...</p>
  
    
</template>
<style scoped>
.box {
display: flex;
margin-bottom: 30px;
}

.box img {
width: 150px;
height: 150px;
margin-right: 50px;
border-radius: 10px;
}

.smallBox p img {
width: 30px;
height: 30px;
margin-right: 0;
}
.smallBox p {
display: flex;
align-items: center;
}

.smallBox p span {
width: 30px;
height: 20px;
border: 1px solid red;
border-radius: 3px;
font-size: 12px;
color: red;
text-align: center;
}

.smallBox p b {
margin-left: 10px;
font-size: 20px;
font-weight: bolder;
}

.smallBox div {
margin-top: 10px;
}

.smallBox div span {
font-size: 16px;
color: black;
font-weight: bold;
}

.count {
margin-left: 10px;
}
#p{
    color: pink;
    font-size: 50px;
    display: flex;
    justify-content: center;
}
</style>